<script setup lang="ts">
import {SettingOutlined, DeleteOutlined} from '@ant-design/icons-vue';
import {onMounted, ref} from 'vue';
import {enableReverseShPlugin} from "@/api/reversesh";
import { message } from 'ant-design-vue';

const modalOpen = ref<boolean>(false);

const switchPluginStatus = ref<boolean>(false);

const pluginEnabledRef = ref<boolean>(false);

const {node_ip, plugin_enabled} = defineProps({
  node_ip: String,
  plugin_enabled: Boolean,
})

onMounted(() => {
  switchPluginStatus.value = plugin_enabled;
  pluginEnabledRef.value = plugin_enabled;
})

const clickHandler =  () => {
  modalOpen.value = true;


}

const handleOk = async () => {
  console.log('点击了确定按钮');

  const {code, data, } = await enableReverseShPlugin({
    node_ip: node_ip,
    enable: switchPluginStatus.value,
  })
  console.log('handlerOK', "code = ", code, "data = ", data, "checked = ", switchPluginStatus.value);
  if (code !== 0) {
    message.error('操作失败');
    pluginEnabledRef.value = false;
  } else {
    message.info('操作成功');
    pluginEnabledRef.value = switchPluginStatus.value;
  }
  modalOpen.value = false;
}

const handleCancel = () => {
  console.log('点击了取消按钮');
  modalOpen.value = false;
  switchPluginStatus.value = plugin_enabled;
}

const deleteHandler = (e) => {
  console.log('点击了删除按钮: ', e);
}
</script>

<template>
  <a-card hoverable style="width: 300px">
    <template #actions>
      <setting-outlined @click="clickHandler" key="setting"/>
      <DeleteOutlined @click="deleteHandler" key="delete"/>
    </template>
    <!-- 卡片内容 -->
    <a-card-meta title="节点">
      <template #description>
        <p>节点ip: {{ node_ip }}</p>
        <p>
          状态: <span :style="{'color': pluginEnabledRef ? 'green' : 'red'}"> {{ pluginEnabledRef == true ? '启用中' : '关闭' }}</span>
        </p>
      </template>
    </a-card-meta>
  </a-card>
  <a-modal v-model:open="modalOpen" title="配置" @ok="handleOk" @cancel="handleCancel">
    <div>
      插件状态: <a-switch style="margin-left: 15px" checked-children="开启" un-checked-children="关闭" v-model:checked="switchPluginStatus"/>
    </div>
  </a-modal>
</template>

<style scoped>

</style>
